﻿@page "/components/tabs"

<DocsPage>
    <DocsPageHeader Title="Tabs" Component="@nameof(MudTabs)" SubTitle="Organizes content across multiple tab pages." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Simple Tabs" />
            <SectionContent Code="@nameof(TabsSimpleExample)" ShowCode="true" Block="true">
                <TabsSimpleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Icon Tabs">
                <Description>
                    Icons can be added alongside text in the tabs to enhance visuals.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsIconAndTextExample)" ShowCode="false">
                <TabsIconAndTextExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Tabs Position">
                <Description>
                    The position of the tab bar can be changed with the <CodeInline>Position</CodeInline> property.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsPositionExample)" ShowCode="false" Block="true" FullWidth="true">
                <TabsPositionExample />
            </SectionContent>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Centered">
                        <Description>
                            The <CodeInline>Centered</CodeInline> property aligns the tabs in the middle of the container.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(TabsCenteredExample)" ShowCode="false" Block="true" FullWidth="true">
                        <TabsCenteredExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Tab Sorting">
                <Description>
                    TabPanels appear in the order they are processed by the RenderTreeBuilder, which can be affected by component nesting in complex scenarios.
                    Use the <CodeInline>SortDirection</CodeInline> property to sort lexicographically by <CodeInline>Text</CodeInline>.<br />
                    <br />
                    Note that sorting is applied during initial rendering, when TabPanels are being added to the parent Tabs. Sorting is not re-evaluated
                    if properties are changed at runtime.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsSortByTextExample)" ShowCode="false" Block="true" FullWidth="true">
                <TabsSortByTextExample />
            </SectionContent>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Sort Keys">
                        <Description>
                            The TabPanel's <CodeInline>SortKey</CodeInline> property is used in preference to the <CodeInline>Text</CodeInline> property, if set.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(TabsSortBySortKeyExample)" ShowCode="false" Block="true" FullWidth="true">
                        <TabsSortBySortKeyExample />
                    </SectionContent>
                </DocsPageSection>
                <DocsPageSection>
                    <SectionHeader Title="Custom Sorting">
                        <Description>
                            Specify a custom <CodeInline>SortComparer</CodeInline> which implements <CodeInline>IComparer&lt;MudTabPanel&gt;</CodeInline> to
                            override the default sorting behaviour. In this scenario, sort direction must be handled by the custom SortComparer.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(TabsSortByComparerExample)" ShowCode="false" Block="true" FullWidth="true">
                        <TabsSortByComparerExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Tab Width">
                <Description>
                    The <CodeInline>MinimumTabWidth</CodeInline> property defines a minimum width for each tab.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsMinimumTabWidthExample)" ShowCode="false">
                <TabsMinimumTabWidthExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Tooltips">
                <Description>
                    Tooltips can be added which will activate when the user hovers over the tab.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsToolTipExample)" ShowCode="false">
                <TabsToolTipExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Badges">
                <Description>
                    Badges can be applied to icons or text within tabs for additional context.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsWithBagdesExample)" ShowCode="false">
                <TabsWithBagdesExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Scrolling Tabs">
                <Description>
                    If the total size of all tabs exceeds the size of the container, scroll buttons are automatically added.
                    The <CodeInline>AlwaysShowScrollButtons</CodeInline> property keeps the scroll buttons visible at all times.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsScrollExample)" ShowCode="false" Block="true" FullWidth="true">
                <TabsScrollExample />
            </SectionContent>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Scroll Icons">
                        <Description>
                            The scroll icons can be customized using the <CodeInline>PrevIcon</CodeInline> and <CodeInline>NextIcon</CodeInline> properties.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(TabsCustomScrollIconsExample)" ShowCode="false" Block="true" FullWidth="true">
                        <TabsCustomScrollIconsExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Render Fragments">
                <Description>
                    Custom tab header content can be provided for special scenarios.
                    Specify only <CodeInline>TabContent</CodeInline> to customize the tab content, or specify <CodeInline>TabWrapperContent</CodeInline> to provide a wrapper around the entire tab header.
                    The header of the active tab can be customized using <CodeInline>ActiveTabClass</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsContentExample)" ShowCode="false" HighLight="TabContent,TabWrapperContent">
                <TabsContentExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Visibility">
                <Description>
                    The <CodeInline>Visible</CodeInline> property defines whether the tab is visible or hidden.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsVisibleExample)" ShowCode="false" FullWidth="true">
                <TabsVisibleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Set Active Panel">
                <Description>
                    Programmatic selection of an active tab is supported through bindings.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsSetActiveExample)" ShowCode="false" Block="true">
                <TabsSetActiveExample />
            </SectionContent>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Binding Active Panel">
                        <Description>
                            Two-way synchronization of the selected panel is possible using bindings.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(TabsBindingExample)" ShowCode="false" Block="true">
                        <TabsBindingExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Dynamic Tabs">
                <Description>
                    A browser-like tab experience can be enabled, allowing users to dynamically add and close tabs.
                    The close icon can be hidden by disabling <CodeInline>ShowCloseIcon</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(DynamicTabsSimpleExample)" ShowCode="false" Block="true">
                <DynamicTabsSimpleExample />
            </SectionContent>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Advanced Dynamic Tabs">
                        <Description>
                            Flexibility in styling can be enhanced using <CodeInline>Header</CodeInline> and <CodeInline>TabPanelHeader</CodeInline>.
                            Header positioning is adjustable through <CodeInline>HeaderPosition</CodeInline> or <CodeInline>TabPanelHeaderPosition</CodeInline>.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(CustomDynamicTabsExample)" ShowCode="false" Block="true">
                        <CustomDynamicTabsExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
